<html class="ui-mobile">

<head>
    <title>Internet Explorer 6</title>
	
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    <link type="text/css" href="jquery.ui.chatbox.css" rel="stylesheet" />
	<link type="text/css" href="bootstrap.css" rel="stylesheet" />
	<link type="text/css" href="bootstrap.min.css" rel="stylesheet" />
	<link type="text/css" href="temp.css" rel="stylesheet" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
    <script type="text/javascript" src="jquery.ui.chatbox.js"></script>
    <script type="text/javascript" src="chatboxManager.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
	  var chart;
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Descrpcion', 'Cantidad'],
          ['Atenciones por agente - cerradas', 4],
          ['Atenciones por agente - no cerradas',      1],
          ['Atenciones por agente - reasignadas',  1]
        ]);

        var options = {
          pieHole: 0.4,
          chartArea:{width:"95%",height:"95%"},
          legend:{alignment: "center"}
        };

        chart = new google.visualization.PieChart(document.getElementById('donutchart'));
		google.visualization.events.addListener(chart, 'select', selectHandler);

        chart.draw(data, options);
      }
		function selectHandler(e) {
			var item = chart.getSelection();
			alert("<" + item[0].row + ">");
			console.log(item);
		}
    </script>
	<script>
		$(function() {
			$( "#from" ).datepicker({
				defaultDate: "+0w",
				changeMonth: true,
				dateFormat: "dd/mm/yy",
				showAnim: "clip",
				numberOfMonths: 1,
				onClose: function( selectedDate ) {
					$( "#to" ).datepicker( "option", "minDate", selectedDate );
				}
			});
			$( "#to" ).datepicker({
				defaultDate: "+1d",
				changeMonth: true,
				dateFormat: "dd/mm/yy",
				showAnim: "clip",
				numberOfMonths: 1,
				onClose: function( selectedDate ) {
					$( "#from" ).datepicker( "option", "maxDate", selectedDate );
				}
			});
		});

		function buscar() {
			console.log("buscar!");
			console.log($( "#from" ).val());
		}

		function hoy() {
			console.log("hoy!");
		}
	</script>
</head>

<body class="ui-mobile-viewport ui-overlay-a">
	<div id="divBarraSuperior" class="ui-div-barra-superior">
		<div id="divNombre" class="ui-div-nombre">
			-
		</div>
		<div id="hora" class="ui-div-hora">
			--:--:--
		</div>
	</div>
	<div id="main">
		<div id="opciones">
			<div class="ui-div-fechas-rango">
				<div class="ui-div-fecha-inicio">
					<label for="from" class="ui-text-align-left">Desde</label>
					<input type="text" id="from" name="from" class="ui-input-fecha">
				</div>
				<div class="ui-div-fecha-fin">
					<label for="to" class="ui-text-align-left">Hasta</label>
					<input type="text" id="to" name="to" class="ui-input-fecha">
				</div>
				<div class="ui-div-botones">
					<div id="divOpcBuscar" class="ui-div-half-width-left">
						<input type="button" value="Buscar" class="ui-button-full-width" onclick="buscar()"/>
					</div>
					<div id="opOpcHoy" class="ui-div-half-width-right">
						<input type="button" value="Hoy" class="ui-button-full-width" onclick="hoy()"/>
					</div>
				</div>
			</div>
		</div>
		<div id="paneles">
			<div id="panelIzquierdo" class="ui-panel-izquierdo">
				<div id="titulo" class="ui-titulo-seccion">
					Atenciones supervisadas
				</div>

				<div id="divTablaTotal" class="table-responsive ui-div-tabla-resultados">
					<table id="tablaTotal" class="table table-hover table-bordered">
						<thead>
							<tr style="cursor: auto;">
								<th class="ui-div-tabla-resultados-columna-detalles"> Descripcion </th>
								<th class="ui-div-tabla-resultados-columna-cantidad"> Cantidad </th>
								<th class="ui-div-tabla-resultados-columna-porcentaje"> % </th>
							</tr>
						</thead>
						<tbody id="tablaTbodyTotal">
							<tr onclick="verDetalleTotal()">
								<td class="ui-div-tabla-resultados-columna-detalles">
									Total de atenciones supervisadas
								</td>
								<td class="ui-div-tabla-resultados-columna-cantidad">
									<div id="totalSupervisado">120</div>
								</td>
								<td class="ui-div-tabla-resultados-columna-porcentaje">
									<div id="porcentajeTotal">100%</div>
								</td>
							</tr>
						</tbody>
					</table>
				</div>

				<div id="divTablaSE" class="table-responsive ui-div-tabla-resultados">
					<table id="tablaSE" class="table table-hover table-bordered">
						<tbody id="tablaTbodySE">
							<tr onclick="verDetalleSETotal()">
								<td class="ui-div-tabla-resultados-columna-detalles">
									Atenciones SE
								</td>
								<td class="ui-div-tabla-resultados-columna-cantidad">
									<div id="totalSE">114</div>
								</td>
								<td class="ui-div-tabla-resultados-columna-porcentaje">
									<div id="porcentajeSE">95%</div>
								</td>
							</tr>
							<tr onclick="verDetalleSECerradas()">
								<td class="ui-div-tabla-resultados-columna-detalles">
									Atenciones SE - Cerradas
								</td>
								<td class="ui-div-tabla-resultados-columna-cantidad">
									<div id="totalSECerradas">109</div>
								</td>
								<td class="ui-div-tabla-resultados-columna-porcentaje">
									<div id="porcentajeSECerradas">90.83%</div>
								</td>
							</tr>
							<tr onclick="verDetalleSENoCerradas()">
								<td class="ui-div-tabla-resultados-columna-detalles">
									Atenciones SE - No cerradas
								</td>
								<td class="ui-div-tabla-resultados-columna-cantidad">
									<div id="totalSENoCerradas">5</div>
								</td>
								<td class="ui-div-tabla-resultados-columna-porcentaje">
									<div id="porcentajeSENoCerradas">4.1%</div>
								</td>
							</tr>
						</tbody>
					</table>
				</div>

				<div id="divTablaAgente" class="table-responsive ui-div-tabla-resultados">
					<table id="tablaAgente" class="table table-hover table-bordered">
						<tbody id="tablaTbodyAgente">
							<tr onclick="verDetalleAgenteTotal()">
								<td class="ui-div-tabla-resultados-columna-detalles">
									Atenciones por Agente
								</td>
								<td class="ui-div-tabla-resultados-columna-cantidad">
									<div id="totalAgente">6</div>
								</td>
								<td class="ui-div-tabla-resultados-columna-porcentaje">
									<div id="porcentajeAgente">5%</div>
								</td>
							</tr>
							<tr onclick="verDetalleAgenteCerradas()">
								<td class="ui-div-tabla-resultados-columna-detalles">
									Atenciones por Agente - Cerradas
								</td>
								<td class="ui-div-tabla-resultados-columna-cantidad">
									<div id="totalAgenteCerradas">4</div>
								</td>
								<td class="ui-div-tabla-resultados-columna-porcentaje">
									<div id="porcentajeAgenteCerradas">3.83%</div>
								</td>
							</tr>
							<tr onclick="verDetalleAgenteNoCerradas()">
								<td class="ui-div-tabla-resultados-columna-detalles">
									Atenciones por Agente - No cerradas
								</td>
								<td class="ui-div-tabla-resultados-columna-cantidad">
									<div id="totalAgenteNoCerradas">1</div>
								</td>
								<td class="ui-div-tabla-resultados-columna-porcentaje">
									<div id="porcentajeAgenteNoCerradas">0.83%</div>
								</td>
							</tr>
							<tr onclick="verDetalleAgenteReasignadas()">
								<td class="ui-div-tabla-resultados-columna-detalles">
									Atenciones por Agente - Reasignadas
								</td>
								<td class="ui-div-tabla-resultados-columna-cantidad">
									<div id="totalAgenteReasignadas">1</div>
								</td>
								<td class="ui-div-tabla-resultados-columna-porcentaje">
									<div id="porcentajeAgenteReasignadas">0.83%</div>
								</td>
							</tr>
						</tbody>
					</table>
				</div>

				<div id="divTablaCooperacion" class="table-responsive ui-div-tabla-resultados">
					<table id="tablaCooperacion" class="table table-hover table-bordered">
						<tbody id="tablaTbodyCooperacion">
							<tr onclick="verDetalleCooperacion()">
								<td class="ui-div-tabla-resultados-columna-detalles">
									Atencion por cooperacion
								</td>
								<td class="ui-div-tabla-resultados-columna-cantidad">
									<div id="totalCooperacion">2</div>
								</td>
								<td class="ui-div-tabla-resultados-columna-porcentaje">
									<div id="porcentajeCooperacion"></div>
								</td>
							</tr>
						</tbody>
					</table>
				</div>

				<div id="divOpciones" class="ui-div-opciones">
					<div id="opGeneral" class="ui-div-half-width-left">
						<input id="btnGeneral" type="button" value="General" class="ui-button-full-width"/>
					</div>

					<div id="opAnterior" class="ui-div-half-width-right">
						<input class="ui-button-full-width" id="btnAnterior" type="button" value="Anterior" />
					</div>
				</div>

				<div id="divGrafico">
					<div id="donutchart" class="ui-div-pie-chart"></div>
				</div>
			</div>

			<div id="panelDerecho" class="ui-panel-derecho">
				<div id="titulo" class="ui-titulo-seccion">
					Detalle de atencion
				</div>

				<div id="divTablaDetalleAtencion" class="table-responsive ui-div-tabla-detalles">
					<table id="tablaDetalleAtencion" class="table table-hover table-bordered">
						<thead>
							<tr>
								<th> # </th>
								<th> Agente </th>
								<th> Usuario </th>
								<th> Hora inicio </th>
								<th> Hora fin </th>
								<th> Total </th>
								<th> Acciones </th>
							</tr>
						</thead>
						<tbody id="tablaTbodyDetalleAtencion">
							<tr>
								<td>1</td>
								<td>Agente</td>
								<td>Usuario 1</td>
								<td>09:35:01</td>
								<td>09:38:15</td>
								<td>00:03:16</td>
								<td><a onclick="showChatDetail(1)" class="ui-div-link-pointer">Ver conversacion</a></td>
							</tr>
							<tr>
								<td>2</td>
								<td>Agente</td>
								<td>Usuario 2</td>
								<td>09:55:35</td>
								<td>10:09:44</td>
								<td>00:12:05</td>
								<td><a onclick="showChatDetail(2)" class="ui-div-link-pointer">Ver conversacion</a></td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
</body>

</html>